Vue项目实战05：18n实现多语言自动切换-浏览器语言设置

达拉崩巴斑得贝迪卜多比鲁翁_

于 2020-10-16 10:33:17 发布

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue i18n

本文链接：https://blog.csdn.net/weixin_46034375/article/details/109110547

本文详细介绍了如何在Vue项目中使用vue-i18n插件实现国际化，包括安装、配置、定义语言包以及如何在页面中渲染多语言内容。通过navigator.language自动切换语言，并提供了手动切换语言的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是vue-i18n

i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求。

安装vue-i18n

直接在项目中执行安装命令：npm install vue-i18n --save
在这里插入图片描述

全局引入vue-i18n

在项目中引入vue-i18n，实例化vue-i18n将需要加载的语言包通过require导入，这里看个人需求我只需要中英日文，所以引入zh-CN.js和en-US.js ja-JP.js，分别对应中文和英文日文，你也可以提供多语言包，最后别忘记了将实例挂载至Vue。

步骤

1.在src下新建locale文件夹

在这里插入图片描述
在locale下建lang文件夹----用来存放自己设置的多语言文件
index.js 入口文件
index.js里放置内容如下

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {
   
    localRead } from '@/libs/util'
import {
   
    Locale } from 'vant'
import customZhCn from './lang/zh-CN'
import customJaJp from './lang/ja-JP'
import customEnUs from './lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enUS from 'vant/lib/locale/lang/en-US'
import jaJP from 'va